<template>
  <Teleport to="body">
    <div
      class="flex justify-center items-center bg-black/40 fixed top-0 left-0 w-full h-full"
    >
      <div
        class="move flex flex-col justify-center item-center w-60 h-48 bg-white border-8 border-green-100 border-solid p-10"
      >
        <h3 class="text-2xl text-black text-center">{{ tip }}</h3>
        <button
          class="flex py-2 justify-center items-center mt-10 bg-blue-500 text-white hover:bg-blue-600 active:text-gray-500 transition-all rounded"
          @click="onContinue"
        >
          继续挑战
        </button>
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
const emit = defineEmits(["goon", "close"]);
defineProps({
  tip: String,
});
const onContinue = () => {
  console.log("close");
  emit("goon");
  emit("close");
};
</script>

<style scoped>
.move{
    animation: move 400ms ease-in-out;
    animation-fill-mode: forwards;
}
@keyframes move {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
